import { Empty, List, NavBar, Image as MyImage } from "antd-mobile";
import moment from "moment";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import $fetch from "../../../utils/app/$fetch";
import "./style.scss";

const TypeEnumStyle: any = {
  "0": "yanchu",
  "1": "tedian",
  "2": "dianqie",
  "3": "waiwu",
  "4": "zhibo",
};

const TypeEnum: any = {
  "0": "演出",
  "1": "特典会",
  "2": "电切会",
  "3": "外务",
  "4": "直播",
};

const ScheduleList = () => {
  const [schduleList, setSchedule] = useState<any>([]);
  const [isLoaded, setLoaded] = useState<any>(false);
  const navigate: any = useNavigate();

  useEffect(() => {
    initPage();
  }, []);

  useEffect(() => {
    if (schduleList?.length > 0) {
      schduleList.forEach((item: any) => {
        const img: any = new Image();
        img.src = item?.eventPhoto;
      });
    }
  }, [schduleList]);

  const initPage = async () => {
    const res = await $fetch("/event/eventInf");
    setSchedule(res);
    setLoaded(true);
  };

  const back = () => {
    window.history.go(-1);
  };

  const renderView = () => {
    if (!isLoaded) {
      return null;
    } else if (schduleList?.length > 0) {
      return (
        <List className="that_schedule_list">
          {schduleList.map((item: any, index: any) => {
            const date = moment(item?.eventDate).format("YYYY-MM-DD");
            return (
              <List.Item
                key={index}
                onClick={() => {
                  navigate("/schedule/detail", {
                    state: { eventId: item?.eventId },
                  });
                }}
              >
                <div className="item_img">
                  {/* <img src={item?.eventPhoto} alt="" /> */}
                  <MyImage
                    src={item?.eventPhoto}
                    fit="cover"
                    width='1.58rem'
                    height='1.58rem'
                    lazy={true}
                  />
                </div>
                <div className="item_content">
                  <div className="top">
                    <div>{item?.eventTime}</div>
                    <div
                      className={
                        "item_type item_" + TypeEnumStyle[item?.eventType]
                      }
                    >
                      {TypeEnum[item?.eventType]}
                    </div>
                  </div>
                  <div className="bottom">
                    <span>{date}</span>
                    <span>{item?.eventName}</span>
                  </div>
                </div>
                {item?.eventMember && (
                  <div className="item_part">{item?.eventMember}</div>
                )}
              </List.Item>
            );
          })}
        </List>
      );
    }
    return <Empty description="暂无活动" />;
  };

  return (
    <div className="container_schedule_list">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={back}
      >
        活动日程
      </NavBar>
      {renderView()}
    </div>
  );
};

export default ScheduleList;
